<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KinSlideshow默认设置效果代码</title>

<script src="js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.KinSlideshow-1.0.js" type="text/javascript"></script>
<script type="text/javascript">

//打开页面随机选择 切换方式（方向）,怕增大KinSlideshow.js文件 就没把随机切换写到里面。
//使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。

var moveStyle
var rand =parseInt(Math.random()*4)
switch(rand){
	case 0:	moveStyle="left" ;break;
	case 1:	moveStyle="right" ;break;
	case 2:	moveStyle="down" ;break;
	case 3:	moveStyle="up" ;break;
}
$(function(){
	$("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});
	
})
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* topmenu */
#topmenu{width:600px;margin:50px auto 0 auto;height:80px;position:relative;}
#topmenu ul li{float:left;font-size:12px;list-style:none;background:#222;position:relative;text-align:center;text-transform:uppercase;width:70px;margin:0 10px;display:inline;line-height:30px;}
#topmenu ul li a{color:#aaa;text-decoration:none;}
#topmenu ul li a:hover{color:#fff;}
#topmenu ul li.active a{color:#fff;font-weight:800;}
</style>

</head>

<body>

<div id="topmenu">
	<ul>
		<li class="active"><a href="demo.html">实例一</a></li>
		<li><a target="_blank" href="demo1.html">实例二</a></li>
		<li><a target="_blank" href="demo2.html">实例三</a></li>
		<li><a target="_blank" href="demo3.html">实例四</a></li> 
	</ul>
</div>

<h2 style="height:60px;width:600px;margin:0 auto;">打开页面随机选择切换方式（方向）---刷新看看  ^_^</h2>


<div id="KinSlideshow1" style="visibility:hidden;margin:0 auto;">
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" width="600" height="300" /></a>
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" width="600" height="300" /></a>
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" width="600" height="300" /></a>
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" width="600" height="300" /></a>
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" width="600" height="300" /></a>
	<a href="http://www.lanrentuku.com" target="_blank"><img src="images/6.jpg" alt="这是标题六" width="600" height="300" /></a>
</div>
       
</body>
</html>
